<template>
  <el-main>
    <el-row>
      <el-form ref="queryForm" :model="queryParams" :inline="true" >
        <el-form-item label="消费时间">
          <el-form-item prop="startTime">
            <el-date-picker clearable
                            v-model="queryParams.startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始时间">
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="endTime">
            <el-date-picker clearable
                            v-model="queryParams.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-table v-loading="loading" :data="dataList" >
          <el-table-column label="客户名称" align="center" prop="customerName" />
          <el-table-column label="联系方式" align="center" prop="customerPhone" />
          <el-table-column label="消费金额" align="center" prop="totalAmount" />
        </el-table>
      </el-col>
      <el-col :span="12">
        <div ref="chart" style="width:100%;height:500px"></div>
      </el-col>
      <el-col :span="24">
        <pagination

          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </el-main>

</template>
<script>
  import {statisticCustomer} from "@/api/business/report";
  import * as echarts from 'echarts';
  export default {
    name: "xxx",
    data() {
      return {
        // 遮罩层
        loading: true,
        dataList:[],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: null,
          startTime:null,
          endTime:null,
        },
        // 表单参数
        form: {},
        chartDataX:[],
        chartDataY:[]
      };
    },
    created() {
      this.getList();
    },
    mounted(){
      this.initChart()
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams= {
          pageNum: 1,
            pageSize: 10,
            status: null,
            startTime:null,
            endTime:null,
        }
      },
      getList(){
        statisticCustomer(this.queryParams).then(resp=>{
          this.dataList = resp.rows;
          this.total = resp.total;
          this.loading = false;

          //处理图形
          this.chartDataX = [];
          this.chartDataY = [];
          this.dataList.forEach(item=>{
            let XData = {
              value:item.totalAmount,
              name:item.totalAmount
            }
            this.chartDataX.push(XData);
            let YData = {
              value:item.customerName,
              name:item.customerName
            }
            this.chartDataY.push(YData);
            //初始化barChart
            this.initChart();
        })
      })
      },
      initChart(){
        const chart = this.$refs.chart
        let option = {
          title: {
            text: '客户消费列表'
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: this.chartDataY
          },
          series: [
            {
              name: '用户消费',
              type: 'bar',
              data: this.chartDataX
            }
          ]
        };
        echarts.init(chart).setOption(option);
      }
    }
  };
</script>
